<template>
  <Modal v-model="modal" :title="title" @on-cancel="onCancel">
    <div class="tag-modal">
      <Form :model="form" :label-width="80" ref="form" :rules="rules">
        <FormItem label="月份:" prop="month">
          <DatePicker
            v-model="form.month"
            @on-change="getMonth"
            type="month"
            :options="options4"
            placeholder="选择月份"
            style="width: 200px"
          ></DatePicker>
        </FormItem>
        <FormItem label="标题:">
          <Upload
            :before-upload="handleUpload"
            :on-success="handleSuccess"
            action="//jsonplaceholder.typicode.com/posts/"
            :on-format-error="handleFormatError"
            :format="['xls','xlsx']"
          >
            <Button icon="ios-cloud-upload-outline" style="width:200px">上传文件</Button>
          </Upload>
        </FormItem>
        <FormItem label>
          <div v-if="this.file !== null">文件名称:{{ this.file.name }}</div>
        </FormItem>
        <FormItem label>
          <p
            @click="upload"
            style="text-decoration:underline ; cursor:pointer ; width: 270px"
          >1、下载导入模板，第二行为范本，导入从第三行开始</p>
           <p
            style=" width: 270px"
          >2、 经销商的APP抢购目标门店数或APP抢购基础门店数或APP抢购目标条数为0或没有维护，该经销商不参与计算</p>
        </FormItem>
      </Form>
    </div>
    <div slot="footer">
      <Button @click="cancle" size="large" type="text">取消</Button>
      <Button
        :disabled="btnDisabled"
        @click="onSave"
        :loading="loadingStatus"
        type="primary"
        size="large"
      >确定</Button>
    </div>
  </Modal>
</template>
<script>
import table from "@/table";
import { formatMonth } from "@/util";
export default {
  components: {},

  data() {
    return {
      id: null,
      modal: false,
      title: "导入",
      btnDisabled: false,
      loadingStatus: false,
      form: {
        month: ""
      },
      rules: {
        month: [
          {
            required: true,
            message: "请输入月份",
            type: "date",
            trigger: "change"
          }
        ]
      },
      status:'pass',
      file: null,
      flag: false
    };
  },
  methods: {
    openModal() {
      this.modal = true;
    },
    closeModal() {
      this.modal = false;
    },
    onCancle() {
      this.$refs["form"].resetFields();
      this.modal = false;
    },
    cancle() {
      this.$refs["form"].resetFields();
      this.modal = false;
    },
    getMonth(data) {
      let param = {
        yearmonth: String(data).replace("-", "")
      };
      this.$ajaxGet("/excel/export/checkYearmonth", param).then(data => {
        return;
      });
    },
    upload() {
     this.status = "loading";
     this.$jsonPost("/excel/export/exportTemplate")
        .then(res => {
          this.status = "pass";
          setTimeout(() => {
            this.$router.push("/home/export/list");
          }, 500);
        })
        .catch(err => {
          this.status = "pass";
        });
      
    },
    handleUpload(file) {
      this.file = file;
      return false;
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "格式不对哦,请选择正确的格式上传",
        desc: file.name + "文件名不正确，请选择xlsx格式"
      });
    },
    onSave() {
      // this.loadingStatus = true;
      if (this.btnDisabled) return;
      this.btnDisabled = true;
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.file == null) {
            this.$Notice.success({
              title: `请先上传文件哦~`
            });
            this.btnDisabled = false;
            return;
          }
          let url = "/excel/export/importTargetData";
          const formData = new FormData();
          formData.set("file", this.file);
          formData.set(
            "yearmonth",
            String(formatMonth(this.form.month)).replace("-", "")
          );
          this.$jsonPost(url, formData)
            .then(data => {
              this.$Notice.success({
                title: `导入成功`
              });
              this.$emit("complete");
              this.btnDisabled = false;
              this.closeModal();
              this.$refs["form"].resetFields();
              this.file = null;
            })
            .catch(() => {
              this.btnDisabled = false;
            });
        } else {
          this.btnDisabled = false;
        }
      });
    }
  }
};
</script>